<template>
  <div class="wallet-root">
    <van-sticky>
      <div class="bg">
        <van-nav-bar
          title="我的资产"
          left-arrow
          @click-left="$router.goBack()"
        />

        <div class="money-box">
          <div class="title">账户余额（USDT）</div>
          <div class="money">{{userInfo.local_balance}}</div>
          <div class="money" style="margin-top:0.1rem;font-size: 0.25rem;color:red;" v-if="userInfo.local_balance < userInfo.min_balance">您资产低于 {{userInfo.min_balance}} U，已禁止交易，请尽快充值！</div>
        </div>

        <div class="btn-box flex">
          <div class="btn" @click="$router.push('/recharge')">充币</div>
          <div class="btn" @click="$router.push('/takeCash')">提币</div>
          <div class="btn" @click="$router.push('/conversion')">互转</div>
        </div>
      </div>

      <div class="tab-box-header">
        <div class="title flex-btw">
          <div>历史记录</div>
          <img
            style="width: .25rem; height: .25rem"
            src="../../assets/images/wallet/1.png"
            alt=""
            @click="show = true"
          />
        </div>

        <div class="row flex-btw">
          <div class="col">类型</div>
          <div class="col">时间</div>
          <div class="col">数量</div>
        </div>
      </div>
    </van-sticky>

    <div class="list">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div
          class="item flex-btw"
          v-for="(item, index) in list"
          :key="index"
        >
          <div class="col" style="width:29%;text-align: left;">{{typeof(typeToName[item.type]) == 'string'?typeToName[item.type]:'-'}}</div>
          <div class="col" style="text-align: center;">{{item.date}}</div>
          <div class="col" style="width:29%;text-align: right;">{{item.money}}</div>
        </div>
      </van-list>
    </div>

    <!-- 弹框 -->
    <van-popup v-model="show" position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        :default-index="type_index"
        value-key="name"
        @confirm="onConfirm"
        @cancel="onCancel"
        ref="checkbox"
      />
    </van-popup>
  </div>
</template>

<script>
import { Toast } from "vant";
import { PERSON , MINE_ACCOUNT_LOG } from "@/api/api.js";
export default {
  data() {
    return {
      list: [],
      loading: false,
      page:1,
      finished: false,
      show: false,
      columns: [
        {
          'type':0,
          'name':"全部",
        },
        {
          'type':1,
          'name':"充值",
        },
        {
          'type':51,
          'name':"提现",
        },
        {
          'type':76,
          'name':"服务费",
        },
        {
          'type':77,
          'name':"购买会员",
        }
      ],
      typeToName: {

      },
      type_index:0,
      userInfo: [],
    };
  },

  mounted() {
    this.getUserInfo();
    for(var value of this.columns) {
      this.typeToName[value['type']] = value['name'];
    }
    console.log(this.typeToName);
  },


  methods: {
    async getUserInfo() {
      const { data } = await this.$reqGet(PERSON);
      if (data.status == 1) {
        this.userInfo = data.data;
      }
    },
    onLoad() {
      // 加载列表
      this.LoadList();
    },

    onConfirm(value, index) {
      this.type_index = index;
      this.show = false;
      this.page = 1;
      this.loading = false;
      this.list = [];
      this.onLoad();
    },

    onCancel(value,index) {
      this.$refs.checkbox.setIndexes([this.type_index]);
      this.show = false;
    },

    // 加载列表
    async LoadList() {
      this.loading = true;
      const { data } = await this.$reqGet(MINE_ACCOUNT_LOG, {
        type: this.columns[this.type_index]['type'],
        page: this.page,
      });

      if (data.status == 1) {
        if(data.data.list.length > 0) {
          let list = data.data.list;
          this.list = this.list.concat(list);
          this.loading = false;
          this.page++;
        } else {
          console.log("没有了");
          this.finished = true;
        }

      }
    },
  },
};
</script>

<style lang="scss" scoped>
.wallet-root {
  .bg {
    height: 3.5rem;
    background: url("../../assets/images/wallet/bg.png");
    background-size: 100% 100%;

    .money-box {
      margin-top: 0.3rem;
      padding-left: 0.3rem;
      .title {
        text-align: left;
        font-size: 0.26rem;
        color: #fefefe;
        margin-bottom: 0.28rem;
      }

      .money {
        font-size: 0.3rem;
        color: #fff;
        text-align: left;
      }
    }

    .btn-box {
      display: none;
      padding-top: 0.4rem;
      padding-left: 0.3rem;

      .btn {
        width: 1.3rem;
        height: 0.46rem;
        text-align: center;
        line-height: 0.46rem;
        border-radius: 0.1rem;
        background-color: #6cb6ff;
        font-size: 0.2rem;
        color: #fff;

        &:nth-child(2) {
          margin: 0 0.46rem;
        }
      }
    }
  }

  .tab-box-header {
    padding: 0.67rem 0.3rem 0.3rem;
    padding-top: 0.67rem;
    background-color: #fff;
    .title {
      font-size: 0.26rem;
      color: #141414;
      text-align: left;
    }
    .row {
      margin-top: 0.3rem;
      font-size: 0.2rem;
      color: #a1a1a1;
    }
  }

  .list {
    .item {
      font-size: 0.2rem;
      border-bottom: 0.02rem solid #f0eeee;
      padding: 0.3rem;

      &:nth-child(1) {
        padding-top: 0;
      }
    }
  }
}
</style>
